<template>
    <el-dialog v-model="dialogVisible" :title="diaTitle" width="500" align-center>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="管理员账号" prop="">
                <el-input v-model="ruleForm.account" placeholder="请输入管理员账号" />
            </el-form-item>
            <el-form-item label="管理员密码" prop="">
                <el-input v-model="ruleForm.password" placeholder="请输入管理员密码" />
            </el-form-item>
            <el-form-item v-if="diaTitle=='添加管理员'" label="确认密码" prop="">
                <el-input v-model="surePass.password" placeholder="请确认密码" />
            </el-form-item>
            <el-form-item label="管理员姓名" prop="">
                <el-input v-model="ruleForm.name" placeholder="请输入管理员姓名" />
            </el-form-item>
            <el-form-item label="管理员角色" prop="">
                <el-select
                v-model="roleObj._id"
                 placeholder="请选择角色"
                size="default" style="width: 100%">
                    <el-option
                    v-for="item in allRoles"
                    :key="item!._id"
                    :label="item!.name"
                    :value="item!._id"
                />
                </el-select>

            </el-form-item>
            <el-form-item label="状态" prop="">
                <el-radio-group v-model="ruleForm!.state">
                    <el-radio :value="1">开启</el-radio>
                    <el-radio :value="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handOk">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch ,computed} from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { managerItem } from '@/api/modules/adminList';
import api from '@/api';
import { RoleItem } from '@/api/modules/roleManage';
interface RuleForm {
    name: string
    password: string
    account: string
}
const emit=defineEmits(["getAdmin"])
const creator=ref({ creator: "twy" })
const roleObj=ref<any>({_id:""})
// 所有角色
const allRoles=ref<RoleItem[]>([])
const dialogVisible = ref(false)
// 一个管理员
const ruleForm = ref<managerItem>({})
const diaTitle=computed(()=>{
    if(ruleForm.value._id){
        return "编辑管理员"
    }else{
        return "添加管理员"
    }
})
// 打开弹
const openDia = () => {
    dialogVisible.value = true
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    account: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],

})
// 确认密码
const surePass=ref({
    password:""
})
// 弹窗关闭数据清空
watch(dialogVisible, () => {
    if (!dialogVisible.value) {
        ruleForm.value = {}
        roleObj.value={}
    }else{
        if(ruleForm.value.role){
             roleObj.value=ruleForm.value.role
        }
    }
},
)
defineExpose({
    openDia,
    dialogVisible,
    ruleForm
})
onMounted(()=>{
    getAllRoles()
})
// 发送请求获取所有角色
const getAllRoles=async()=>{
    const res = await api.roleManage.search({
         creator: "twy"
        })
        console.log(res,333);
        
    if (res.code == 200) {
       allRoles.value=res.data.rows
   }
}
const handOk = () => {
    console.log(ruleForm.value);
    
  if (ruleForm.value._id) {
    handOkUpdate()
  } else {
    addAdmin()
  }
}

// 点击开始更新
const handOkUpdate = async () => {
  const res = await api.adminList.update({
    ...ruleForm.value,
    ...creator.value,
  })
  if (res.code == 200) {
    ElMessage.success("管理员更新成功")
    // 更新成功刷新页面
    emit("getAdmin")
    dialogVisible.value = false
  } else {
    ElMessage.error(res.message)
  }
}
// 点击添加管理员
const addAdmin = async () => {
  // let pid = addMenuItem.value.pid[addMenuItem.value.pid.length - 1];
  const res = await api.adminList.add({
    ...ruleForm.value,
    ...creator.value,
    role:roleObj.value._id
  })
  if (res.code == 200) {
    ElMessage.success("管理员添加成功")
    dialogVisible.value = false
    emit("getAdmin")
    // emit2("getAllMemuNotPage")
  } else {
    ElMessage.error(res.message)
  }
}

</script>